
<template>
  <div v-if="show">
    <div class="modal-backdrop fade" :class="{ show: show }"></div>
    <div
      class="modal fade modal-md"
      :class="{ show: show }"
      :style="{ display: show ? 'block' : 'none' }"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{{ isEdit ? "编辑" : "新建" }}</h5>
            <button
              @click="hideModal"
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <label for="exampleInputEmail1">分类</label>
              <div class="input-group input-group-sm mb-2">
                <select class="form-control" v-model="cmd.tag.value" @change="handleSelect">
                  <option
                    v-for="(item, index) in tags"
                    :key="index"
                    :value="item.value+''"
                  >{{ item.title }}</option>
                </select>
              </div>
              <div class="form-group input-group-sm mb-2">
                <label for="exampleInputEmail1">标题</label>
                <input
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  v-model="cmd.title"
                  aria-describedby="emailHelp"
                />
              </div>
              <label for="exampleInputEmail1">路径</label>
              <div class="input-group input-group-sm mb-2">
                <input type="text" class="form-control" v-model="cmd.path" />
                <div class="input-group-append">
                  <div class="btn-group">
                    <button class="btn btn-sm btn-primary" @click="openDirectory">选择路径</button>
                  </div>
                  <div class="btn-group">
                    <button class="btn btn-sm btn-primary ml-2" @click="openFile">选择程序</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-sm btn-secondary"
              data-dismiss="modal"
              @click="hideModal"
            >取消</button>
            <button type="button" class="btn btn-sm btn-primary" @click="updateCmd" v-if="isEdit">更新</button>
            <button type="button" class="btn btn-sm btn-primary" @click="createCmd" v-else>保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const { ipcRenderer} = require('electron');
import { createCmd, getCmd, updateCmd } from "@/utils/cmd";
import { getTags } from "@/utils/tag";
import { mapGetters } from "vuex";

// targetWindow.webContents
export default {
  name: "",
  data() {
    return {
      isEdit: false,
      id: "",
      cmd: {
        title: "",
        path: "",
        tag:{
          title:'',
          value:0
        }
      },
      show: false,
    };
  },
  created() {
    
  },
  mounted() {
   
  },
  methods: {
    openModal() {
      this.show = true;
      this.cmd.title = "";
      this.cmd.path = "";
      this.getTags();

       console.log("tags", this.tags);
    console.log(this.$store)
    },
    hideModal() {
      this.show = false;
      this.cmd.title = "";
      this.cmd.path = "";
    },
     openDirectory() {
      // const result = await currnetWindow.webContents.send("openDirectory");
      const result= ipcRenderer.invoke('dialog:openDirectory')
      // console.log('result--',result,res)
      result.then(res => {
        console.log("file", res);
        this.cmd.path = res;
      });
    },
    openFile() {
      const result = ipcRenderer.invoke("dialog:openFile");
      result.then(res => {
        this.cmd.path = res;
      });
    },
    async createCmd() {
      await createCmd(this.cmd);
      this.$emit("confirm");
      this.hideModal();
    },
    async getCmd() {
      let res = await getCmd({ id: this.id });
      this.cmd.title = res.title;
      this.cmd.path = res.path;
    },
    async getTags() {
      let res = await getTags({ sortBy: "title",page:1,size:20 });
      console.log("tag res", res);
      this.$store.dispatch("app/setTags", res);
    },
    async updateCmd() {
      // this.$set(this.cmd,'')
      await updateCmd({ id: this.id, ...this.cmd });
      // console.log('this.cmd',this.cmd);
      this.$emit("confirm");
        this.hideModal();
    },
    handleSelect(e) {
      this.cmd.tag.value = e.target.value;
      // let index = this.tags.findIndex(item=>item.value==e.taget.value+'');
      let matchs = this.tags.filter(item=>item.value==e.target.value);
      // console.log('index--',index)
      this.cmd.tag.title = matchs[0].title;
      console.log(this.cmd.tag);
    }
  },
  computed: {
    ...mapGetters("cmd", ["cmds"]),
    ...mapGetters("app", ["tags"])
  }
};
</script>
<style scoped lang='scss'>
</style>
